<template>
  <van-popup v-model="show" round closeable position="bottom" :style="{ height: '50%' }">
    <van-cell class="cell-title cell-text" title="供应商"> </van-cell>
    <van-cell
      v-for="item in formList"
      :key="item.id"
      :title="item.name"
      class="cell-item"
      :class="{ 'active': item.id === id }"
      @click="select(item.name, item.id)"
    >
      <template #right-icon>
        <van-icon name="checked" color="#49CA6F" class="success-icon" />
      </template>
    </van-cell>
  </van-popup>
</template>

<script>
export default {
  name: "VanSkeleton",
  props: {
    formList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      show: false,
      id: 0
    };
  },
  methods: {
    init() {
      this.show = true;
    },
    async select(name, id) {
      this.id = id;
      this.show = false;
      this.$emit("select", { id, name });
    }
  }
};
</script>

<style lang="less" scoped>
.cell-title {
  font-size: 36px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: bold;
  color: #202630;
}
::v-deep .van-cell {
  align-items: center;
}
::v-deep .van-cell::after {
  border-bottom: 0;
}
.success-icon {
  font-size: 32px;
  display: none;
}
.cell-item{
  font-size: 28px;
  font-weight: bold;
  color: #202630;
}
.active {
  color: #49CA6F;
  .success-icon {
    display: block;
  }
}
::v-deep .van-popup__close-icon--top-right {
  font-size: 44px;
  color: #666;
}
</style>
